<template>
  <div>
    <div class="margin-container-list">
      <!--活动状态:活动状态:1.待开始, 2.进行中,3已结束 -->
      <div class="tab-style-default">
        <el-tabs v-model="dataListQuery.status" @tab-click="statusClick" >
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="待发布" name="1"> </el-tab-pane>
          <el-tab-pane label="待开始" name="2"> </el-tab-pane>
          <el-tab-pane label="进行中" name="3" > </el-tab-pane>
          <el-tab-pane label="已结束" name="4" > </el-tab-pane>
        </el-tabs>
      </div>
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="dataListQuery.keyword" placeholder="标题名称" style="width: 300px"></el-input>
            <el-date-picker v-model="datePicker"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            start-placeholder="发布开始时间"
                            end-placeholder="发布结束时间">
            </el-date-picker>
            <el-date-picker v-model="datePicker2"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            start-placeholder="活动开始时间"
                            end-placeholder="活动开始结束时间">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </div>
          <br/>
          <div class="pad-t-10">
            <el-button @click="handleCreate" type="primary">新建活动</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%" >
          <el-table-column width="240px" label="活动标题" prop="title" ></el-table-column>
          <el-table-column width="240px" label="发布时间" prop="publishTime" ></el-table-column>
          <el-table-column width="240px" label="活动时间" >
            <template slot-scope="scope" v-if="scope.row.startTime && scope.row.endTime">
              开始时间:{{scope.row.startTime}}<br>
              结束时间:{{scope.row.endTime}}
            </template>
          </el-table-column>
          <el-table-column width="240px" label="商品">
            <template slot-scope="scope">
              共{{scope.row.goodsCount }}款
            </template>
          </el-table-column>
          <el-table-column width="240px" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">待发布</span>
              <span v-if="scope.row.status == 2">待开始</span>
              <span v-if="scope.row.status == 3">进行中</span>
              <span v-if="scope.row.status == 4">结束</span>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="创建时间" prop="createTime" ></el-table-column>
          <el-table-column width="240px" label="备注" prop="remark"  >
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" placeholder="请输入内容" maxlength="10" @change="changeRemark(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" v-if="scope.row.status == 1 || scope.row.status == 2" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" size="medium" v-if="scope.row.status != 1 && scope.row.status != 2" @click="handleUpdate(scope.row)">查看</el-button>
              <el-button type="text" size="medium" v-if="scope.row.status == 1" @click="handlePublish(scope.row)">立即发布</el-button>
              <el-button type="text" size="medium" v-if="scope.row.status == 3 || scope.row.status == 2" @click="handleChangeStatus(scope.row)">结束</el-button>
              <el-button type="text" size="medium" v-if="scope.row.status != 2 && scope.row.status != 3" @click="deletePromotion(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="dataListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="dataListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>

  <el-dialog title="设置活动开始时间" :visible.sync="dialogFormVisible" :close-on-press-escape="true" width="650px">
    <el-form>
      <el-form-item label="活动时间：" label-width="170px" prop="taxAfterFee">
        <el-date-picker
          v-model="dateTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="button_ok">确定</el-button>
    </div>
  </el-dialog>

  <el-dialog :visible.sync="remarkVisible" :close-on-press-escape="true" width="650px">
    <el-form>
      <el-form-item label="备注：" label-width="170px" prop="remark">

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="remarkVisible = false">取消</el-button>
      <el-button type="primary" @click="button_ok">确定</el-button>
    </div>
  </el-dialog>

  </div>
</template>

<script>
  import { pagingPromotion, updatePromotionStatus, deletePromotion, updatePromoitonRemark } from '@/api/sell/promotion'

  export default {
    data() {
      return {
        total: null,
        dataList: [],
        listLoading: true,
        dialogFormVisible: false,
        remarkVisible: false,
        dataListQuery: {
          keyword: '',
          userType: '1',
          userId: this.getEnterpriseId(),
          status: null,
          publishStartTime: '',
          publishEndTime: '',
          promotionStartTime: '',
          promotionEndTime: '',
          currentPage: 1,
          size: 10
        },
        updateStatusPromotionId: '',
        dateTimeRange: [],
        datePicker: [],
        datePicker2: [],
        dict: {}
      }
    },
    // 初始化页面
    created() {
      console.log('work-list')
      this.listLoading = false
      this.initData()
    },
    mounted() {
    },
    methods: {
      initData() {
        this.listLoading = true
        const datePicker = this.datePicker
        if (this.$utils.isExist(datePicker) && datePicker.length > 0) {
          this.dataListQuery.publishStartTime = datePicker[0]
          this.dataListQuery.publishEndTime = datePicker[1]
        } else {
          this.dataListQuery.publishStartTime = ''
          this.dataListQuery.publishEndTime = ''
        }
        const datePicker2 = this.datePicker2
        if (this.$utils.isExist(datePicker2) && datePicker2.length > 0) {
          this.dataListQuery.promotionStartTime = datePicker2[0]
          this.dataListQuery.promotionEndTime = datePicker2[1]
        } else {
          this.dataListQuery.promotionStartTime = ''
          this.dataListQuery.promotionEndTime = ''
        }

        pagingPromotion(this.dataListQuery).then(response => {
          this.dataList = response.data.records
          this.total = response.data.total
          this.listLoading = false
          this.dict = response.data.dict
        })
      },
      resetSearch() {
        this.dataListQuery.keyword = ''
        this.dataListQuery.publishStartTime = ''
        this.dataListQuery.publishEndTime = ''
        this.dataListQuery.promotionStartTime = ''
        this.dataListQuery.promotionEndTime = ''
        this.datePicker = []
        this.datePicker2 = []
      },
      // 添加
      handleCreate() {
        this.$router.push({ path: '/goods/promotion/edit/index', query: { }})
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.dataListQuery.size = val
        this.initData()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.dataListQuery.currentPage = val
        this.initData()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      statusClick() {
        this.dataListQuery.keyword = ''
        this.dataListQuery.datePicker = []
        this.dataListQuery.datePicker2 = []
        this.initData()
      },
      // 查询
      handleSearch() {
        this.dataListQuery.currentPage = 1
        this.initData()
      },
      deletePromotion(row) {
        const data = {
          promotionId: row.promotionId
        }
        this.$confirm('此操作将删除该数据，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePromotion(data).then(response => {
            if (response.isError) return
            this.initData()
          })
        }).catch(() => {})
      },
      copyPromotion(row) {

      },
      handleChangeStatus(row) {
        const data = {
          promotionId: row.promotionId,
          promotionStatus: '3'
        }
        this.$confirm('此操作将结束该活动，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updatePromotionStatus(data).then(response => {
            if (response.isError) return
            this.initData()
          })
        })
      },
      handlePublish(row) {
        this.dialogFormVisible = true
        this.updateStatusPromotionId = row.promotionId
      },
      button_ok() {
        const dateTimeRange = this.dateTimeRange
        if (dateTimeRange == null || dateTimeRange.length === 0) {
          this.$message.error('请选择日期!')
          return
        }
        const data = {
          promotionId: this.updateStatusPromotionId,
          startTime: dateTimeRange[0],
          endTime: dateTimeRange[1],
          userType: '1',
          promotionStatus: '2'
        }
        updatePromotionStatus(data).then(response => {
          if (response.isError) return
          this.dialogFormVisible = false
          this.initData()
        })
      },
      changeRemark(row) {
        const promotionId = row.promotionId
        const remark = row.remark
        const data = {
          promotionId: promotionId,
          remark: remark
        }
        updatePromoitonRemark(data).then(response => {

        })
      },
      // 编辑
      handleUpdate(row) {
        // 清除赋值
        const promotionId = row.promotionId
        this.$router.push({ path: '/goods/promotion/edit/index', query: { promotionId: promotionId }})
      }
    }
  }
</script>

<style lang="less" scoped>
  .mission-type {
    padding: 35px 38px;
    width: 150px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin: 25px 40px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  .flex-cag-box{
    padding: 0px 0px 20px 70px;
    .mission-type:nth-child(4n){
      margin-right: 0px;
    }
  }
  .next-step-btn{
    padding: 13px 35px;
    font-size: 18px;
  }

  .sel-mission-type {
    background-color: #409eff;
    color: #fff;
  }

  .budget-el-select {
    padding-top: 10px;
    padding-left: 50px;
  }
</style>
